<!--
 * @Author: your name
 * @Date: 2021-08-22 14:18:08
 * @LastEditTime: 2021-08-25 17:24:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hmmm-hm86-hmdytt\src\module-hmmm\pages\subjects.vue
-->
<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 头部卡片公共组件 -->

      <PageTools @sou="sou" @qing="qing">
        <template #left>共条记录</template>
        <template #right>
          <el-button size="small" type="primary" @click="dia"
            >新增学科</el-button
          >
        </template>
      </PageTools>
      <el-dialog title="修改学科" :visible.sync="di">
        <el-form :model="form" :rules="rules">
          <el-form-item label="学科名称" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-switch
            style="display: block"
            v-model="value1"
            active-color="#13ce66"
            inactive-color="pink"
            inactive-text="是否显示"
          >
          </el-switch>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="di = false">取 消</el-button>
          <el-button type="primary" @click="gai">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 员工表格 -->
      <el-card style="margin-top: 20px">
        <el-table :data="list" border stripe>
          <el-table-column label="序号" type="index" width="100" />
          <el-table-column label="学科名称" prop="subjectName" />
          <!-- 头像列最后来处理 -->
          <!-- <el-table-column label="头像" prop="staffPhoto" sortable="" /> -->
          <el-table-column label="创建者" prop="username" />
          <el-table-column label="创建日期" prop="addDate">
            <template #default="{row}">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>

          <el-table-column label="前台是否显示" prop="isFrontDisplay" />
          <el-table-column label="二级目录" prop="twoLevelDirectory" />
          <el-table-column label="标签" prop="tags" />
          <el-table-column label="题目数量" prop="totals" />
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{row}">
              <!-- {{ row }} -->
              <el-button @click="go(row)" type="text" size="small"
                >学科分类</el-button
              >
              <el-button type="text" size="small" @click="goto(row)"
                >学科标签</el-button
              >
              <el-button type="text" size="small" @click="xiu(row)"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="open(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <SubjectsAdd ref="addd" @jia="jia"></SubjectsAdd>

        <!-- 分页组件 -->

        <el-pagination
          class="pag"
          background
          :current-page="data.page"
          :page-sizes="[10, 15, 20]"
          :page-size="data.pagesize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="prev, pager, next, sizes,jumper, ->, total, slot"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  list,
  add,
  remove,
  update,
  detail,
  simple
} from "../../api/hmmm/subjects";
import SubjectsAdd from "../components/subjects-add.vue";
import PageTools from "./components/page-tools.vue";
export default {
  name: "Employees",
  components: { PageTools, SubjectsAdd },
  data() {
    return {
      data: {
        page: 1,
        pagesize: 10,
        subjectName: []
      },
      rules: {
        name: [
          {
            required: true,
            message: "用户姓名不能为空",
            trigger: ["blur", "change"]
          },
          {
            min: 1,
            max: 4,
            message: "用户姓名为1-4位",
            trigger: ["blur", "change"]
          }
        ]
      },
      list: [],
      // page: 1,
      // size: 5,
      total: 20,
      userId: "",
      dialogTableVisible: false,
      isFrontDisplay: 1,
      value1: true,
      di: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      xiugai: ""
    };
  },

  created() {
    this.getlist();
  },
  methods: {
    qing() {
      this.getlist();
    },
    // size发送变化触发的方法
    handleSizeChange(newVal) {
      console.log(newVal);

      this.data.pagesize = newVal;
      // this.page = 1;
      this.getlist();
    },
    // 页码发生变化触发的方法
    handleCurrentChange(newVal) {
      console.log(newVal);
      this.data.page = newVal;
      this.getlist();
    },
    go(row) {
      // console.log(row.id);
      this.$router.push({
        path: "/subjects/directorys",
        query: { id: row.id, subjectName: row.subjectName }
      });
    },
    goto(row) {
      this.$router.push({
        path: "/subjects/tags",
        query: { id: row.id, subjectName: row.subjectName }
      });
    },
    dia() {
      this.$refs.addd.add();

      this.getlist();
    },
    open(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          console.log(row.id);
          const {
            config: { data }
          } = await remove({ id: row.id });
          this.$message.success("删除成功");
          // console.log("11");
          this.getlist();
        })
        .catch(e => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async getlist() {
      // const res = await list(this.data);
      // console.log(res);
      const {
        data: { items, page, pagesize }
      } = await list(this.data);
      this.list = items;
      this.page = page;
      this.pagesize = pagesize;
      // console.log(item.isFrontDisplay);
      this.list.forEach(item => {
        if (item.isFrontDisplay === 1) {
          item.isFrontDisplay = "是";
        } else {
          item.isFrontDisplay = "否";
        }
      });
    },
    //添加
    async jia(fff) {
      console.log(fff);
      const res = await add({
        subjectName: fff.name,
        isFrontDisplay: fff.value2
      });
      this.getlist();
    },
    //修改
    async xiu(row) {
      this.di = true;
      this.xiugai = row.id;
      this.form.name = row.subjectName;
      console.log(this.form.name);
    },
    async gai() {
      const res = await update({
        id: this.xiugai,
        subjectName: this.form.name
      });
      // { subjectName: this.form.name }
      console.log(res);
      this.di = false;
      this.getlist();
    },
    //学科详情
    async sou(ccc) {
      const str = this.list.filter(item => item.subjectName.includes(ccc));

      console.log(str);
      this.list = str;
    },
    //学科简单列表
    async jiandan(row) {
      const res = await simple({ subjectName: row.subjectName });
      console.log(res);
    }
  }
};
</script>

<style scoped lang="scss">
.pag {
  margin-top: 20px;
  text-align: right;
}
.right el-button el-button--primary el-button--small {
  margin-top: -30px;
}
</style>
